<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <mata http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- Import style -->
        <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
        <!-- Import Vue 3 -->
        <script src="https://unpkg.com/vue@3"></script>
        <!-- Import component library -->
        <script src="https://unpkg.com/element-plus"></script>
</head>

<body>
    <div id="app">
        <el-card class="card" v-for="stu in stus">
            <template #header>
                <div class="card-header">
                    <span><el-avatar :size="50" :src="stu.avatar" /></span>
                    <span class="name">{{stu.name}}</span>
                </div>
            </template>
            <div>
                <p>年龄： {{stu.age}}</p>
                <p>性别： {{stu.sex}}</p>
                <p>总分： {{stu.score[0]+stu.score[1]+stu.score[2]}}</p>
            </div>
            <el-tooltip placement="bottom" v-if="stu.score[0]>=60&&stu.score[1]>=60&&stu.score[2]>=60"
                <template #content>
                    <p>语文：{{stu.score[0]}}</p>
                    <p>数学：{{stu.score[1]}}</p>
                    <p>英语：{{stu.score[2]}}</p>
                </template>
                <el-button>查看成绩单</el-button>
            </el-tooltip>
        </el-card>                
    </div>
</body>
<script>
    const App = {
        data() {
            return {
                stus: [
                    { id: "", name: "张三", age: 20, sex: "男", score: [80, 89, 90],  avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F789d864d-6acc-4b60-963e-43d02fbb8938%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714273546&t=543b84ec2319f69e5b6bd40003b1b358 " },
                    { id: "", name: "李四", age: 20, sex: "男", score: [78, 40, 16],  avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F9c0a7347-9cd8-4e26-bdb2-22d3649aa61c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714273546&t=ad3dda9167305ccb094d3896c58528b2" },
                    { id: "", name: "王五", age: 20, sex: "男", score: [60, 85, 77],  avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2Ff2de3982-ff80-49ea-b7ea-c7e3c18cf023%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1714273546&t=15ad48f024eb5ec95a18e54fc3d5d3d0" },
                    // {id: "", name: "王五", age: 20, sex: "男", score: [40, 85, 79], avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png"},
                    // {id: "", name: "王五", age: 20, sex: "男", score: [68, 85, 89], avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png"},
                    // {id: "", name: "王五", age: 20, sex: "男", score: [60, 85, 86], avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png"},
                    // {id: "", name: "王五", age: 20, sex: "男", score: [55, 85, 76], avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png"},
                    // {id: "", name: "王五", age: 20, sex: "男", score: [60, 85, 794], avatar: "./img/avatar"+Math.floor(Math.random()*10)+".png"},
               ],
               report: {},
               drawer: false
            }
        },
        methods: {}
    }
    Vue.createApp(App).use(ElementPlus).mount("#app")
</script>